<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Site prevalence statistics</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/flatpickr/4.6.9/flatpickr.min.css">
    <style>
        th, td {
            text-align: center;
        }

        .modal-title {
            font-size: 1.5rem;
        }

        /* Add margin to form groups */
        .form-group {
            margin-bottom: 1rem;
        }

        /* Add border to invalid inputs */
        .form-control.is-invalid {
            border-color: #dc3545 !important;
        }

        /* Change color of invalid feedback text */
        .invalid-feedback {
            color: #dc3545;
        }
    </style>
</head>
<body>
<h1 class="text-center my-5">Site prevalence statistics</h1>
<div class="text-center">
    <button id="get-time-money" class="btn btn-primary btn-lg">Obtain data</button>
</div>

<!-- Modal -->
<div class="modal fade" id="select-time-modal" tabindex="-1" role="dialog" aria-labelledby="select-time-modal-label"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="select-time-modal-label">Select time range</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="select-time-form">
                    <div class="form-group">
                        <label for="start-time">Start Time:</label>
                        <input type="text" name="start-time" id="start-time" class="flatpickr form-control"
                               placeholder="Select start time" required>
                        <div class="invalid-feedback">此选项为必填项</div>
                    </div>

                    <div class="form-group">
                        <label for="end-time">End Time:</label>
                        <input type="text" name="end-time" id="end-time" class="flatpickr form-control"
                               placeholder="Select end time"
                               required>
                        <div class="invalid-feedback">此选项为必填项</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="submit-time-range">Confirm</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    $(function () {
        // 初始化时间选择器
        $(".flatpickr").flatpickr({
            enableTime: true,
            dateFormat: "Y-m-d H:i:S",
            time_24hr: true,
            onClose: function (selectedDates, dateStr, instance) {
                // 校验是否填写了起始时间和结束时间
                if (instance.input.name === "start-time" && !dateStr) {
                    instance.element.classList.add("is-invalid");
                } else if (instance.input.name === "end-time" && !dateStr) {
                    instance.element.classList.add("is-invalid");
                } else {
                    instance.element.classList.remove("is-invalid");
                }
            }
        });

        $('#get-time-money').click(function () {
            console.log(1)
            // 清空表单中的输入内容
            $('#select-time-form')[0].reset();
            // 移除表单中所有元素的 is-invalid 类名
            $('#select-time-form :input').removeClass('is-invalid');
            // 显示弹窗
            $('#select-time-modal').modal('show');
        });

        $('#submit-time-range').click(function () {
            var startTime = $('#start-time').val();
            var endTime = $('#end-time').val();

            // 校验是否填写了起始时间和结束时间
            if (!startTime || !endTime) {
                $('#start-time, #end-time').addClass("is-invalid");
                return;
            }

            // 隐藏弹窗
            $('#select-time-modal').modal('hide');

            // 发送AJAX请求获取数据
            $.ajax({
                url: "http://localhost:8080/stadium/admin/getAge",
                type: "POST",
                dataType: "json",
                data: {
                    startTime: startTime,
                    endTime: endTime
                },
                success: function (data) {
                    var table = "<table class=\"table\"><thead><tr><th>Site type</th><th>1-10</th><th>11-20</th><th>21-30</th><th>31-40</th><th>41-50</th><th>51-60</th><th>61-70</th><th>71-80</th><th>81-90</th><th>91-100</th></tr></thead><tbody>";
                    for (var i = 0; i < data.length; i++) {
                        table += "<tr><td>" + data[i].teamName + "</td><td>" + data[i].Age1 + "</td><td>" + data[i].Age11 + "</td><td>" + data[i].Age21 + "</td><td>" + data[i].Age31 + "</td><td>" + data[i].Age41 + "</td><td>" + data[i].Age51 + "</td><td>" + data[i].Age61 + "</td><td>" + data[i].Age71 + "</td><td>" + data[i].Age81 + "</td><td>" + data[i].Age91 + "</td></tr>";
                    }
                    table += "</tbody></table>";
                    $("#result").html(table);
                    console.log(data)
                    // 获取要添加按钮的div元素
                    const div = document.getElementById('result');

                    // 创建一个新的按钮元素
                    const button = document.createElement('button');

                    // 设置按钮文本内容
                    button.innerHTML = '下载附件';

                    // 将按钮的id属性设置为newButton
                    button.id = 'newButton';

                    // 将按钮添加到div元素中
                    div.appendChild(button);

                    button.addEventListener('click', function() {
                        downloadStadiumAndAge(data);
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("请求失败：" + jqXHR.status);
                }
            });
        })
        //下载函数
        function downloadStadiumAndAge(data) {
            // 将数据转换为JSON字符串
            const jsonString = JSON.stringify(data);

            // 发送POST请求并下载文件
            fetch('http://localhost:8080/stadium/common/downLoadStadiumAge', {
                method: 'POST',
                body: jsonString,
            })
                .then((response) => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.blob();
                })
                .then((blob) => {
                    console.log(blob)
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'stadiumAndAge.csv';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                })
                .catch((error) => {
                    console.error('There was a problem with the fetch operation:', error);
                });
        }


    });
</script>
<div id="result"></div>
</body>
</html>
